<template>
  <div class="center">
    <div id="demo" class="demo">
      <el-menu
        mode="horizontal"
        style="border-radius: 3px"
      >
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-tools"></i> <span>工具</span></template>
          <el-submenu index="2-1">
            <template slot="title"><i class="el-icon-minus"></i>测量</template>
            <el-menu-item index="2-1-1" @click="$emit('distanceMeasurement','measurement')"><i class="el-icon-minus" ></i>测距</el-menu-item>
            <el-menu-item index="2-1-2" @click="$emit('distanceMeasurement','area')"><i class="el-icon-reading" ></i>测面</el-menu-item>
            <el-menu-item index="2-1-3" @click="$emit('distanceMeasurement','delete')"><i class="el-icon-delete" ></i>删除</el-menu-item>
          </el-submenu>
          <el-submenu index="2-2">
            <template slot="title"><i class="el-icon-location"></i>坐标</template>
            <el-menu-item index="2-2-1" @click="$emit('drawShape','Marker','2')"><i class="el-icon-s-opportunity" ></i>点</el-menu-item>
            <el-menu-item index="2-2-2" @click="$emit('drawShape','Polygon','2')"><i class="el-icon-folder" ></i>多边形</el-menu-item>
            <el-menu-item index="2-2-3" @click="$emit('drawShape','Circle','2')"><i class="el-icon-coin" ></i>圆形</el-menu-item>
            <el-menu-item index="2-2-4" @click="$emit('drawShape','Rectangle','2')"><i class="el-icon-files" ></i>矩形</el-menu-item>
          </el-submenu>
        </el-submenu>
        <!-- <el-submenu index="3">
          <template slot="title"><i class="el-icon-s-goods"></i> <span>管理</span></template>
          <el-menu-item index="3-1" @click="$emit('lineQuery')"><i class="el-icon-search" ></i>线路查询</el-menu-item>
          <el-menu-item index="3-2" @click="$emit('locomotiveTrack')"><i class="el-icon-s-operation" ></i>机车跟踪</el-menu-item>
          <el-menu-item index="3-3" @click="$emit('personnelTrack')"><i class="el-icon-s-check" ></i>人员跟踪</el-menu-item>         
        </el-submenu> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "mapNavigation",
};
</script>
<style lang="scss" scoped>
.center {
  width: 100%;
  height: calc(100%);
  z-index: 1;
  margin: auto;
  //height: 550px;

  .select {
    width: 150px;
    position: absolute;
    top: 5%;
    left: 75%;
    z-index: 2;
  }
  .demo {
    right: 0px;
    position: absolute;
    z-index: 10000;
    height: 40px;
    top: 15%;
    bottom: 0px;
    margin: 0px 35px 0px 0px;
    border-radius: 3px;
    background: #fff;
  }
  .el-menu .el-submenu {
    min-width: 75px !important;
    //height: 45px;
  }

  .el-menu--collapse .el-menu .el-submenu,
  .el-menu--popup {
    min-width: 75px !important;
    height: 40px;
    line-height: 40px;
  }
  .el-menu .el-submenu div {
    height: 40px;
    line-height: 40px;
  }
}
</style>
<style >
.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-menu--popup,.el-submenu .el-menu-item{
  min-width: 75px;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 40px;
  line-height: 40px;
  padding: 0px 5px;
}
.layer-title-skin .layui-layer-title {
  background-color: #1e9fff !important;
  color: #fff;
}
</style>

